<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>configure</title>
    <style>
        *{
            padding: 0 0;
            margin: 0 0;
            box-sizing: border-box;
            user-select: none;
        }
        
        button{
            padding:10px 20px;
            border: 0;
            background-color: rgb(242,242,242);
            border: 2px solid transparent;
            border-radius: 5px;
            margin-top: 10px;
            margin-right: 5px;
        }

        button:hover{
            background-color: rgb(230,230,230);
            border: 2px solid rgb(200,200,200);
        }

        button:active{
            background-color: rgb(200,200,200);
            border: 2px solid rgb(200,200,200);
        }

        .title2{
            font-weight: bold;
            font-size: 18px;
            margin-top: 20px;
        }

        .p{
            line-height: 25px;
            margin-top: 10px;
            font-size: 14px;
        }

        input{
            margin-top: 10px;
        }

        .p-red{
            line-height: 25px;
            color: red;
            margin-top: 5px;
            font-size: 14px;
        }
    </style>
    <script>
        let flag = true
        function request(url){
            return new Promise((resolve, reject) => {
              fetch(url).then(res=>{
                return resolve(res.json())
              })
            })
        }
        async function changePage(id){
            await waitSeconds(0.2)
            let allPage = document.getElementsByClassName("page")
            document.getElementById("pages").style.display = "unset"
            for(let i=0;i<allPage.length;i++){
                allPage[i].style.display = "none"
            }
            allPage[id-1].style.display = "unset"
        }
        function loaded(){
            changePage(1)
        }
        function waitSeconds(n){
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    return resolve()
                }, n*1000);
            })
        }
        async function testPort(){
            document.getElementById("p2next").style.display = 'none'
            document.getElementById("testport").style.display = 'none'
            let ipt = document.getElementById("portinput").value.toString()
            if(ipt==''){
                document.getElementById("testport").style.display = 'unset'
                document.getElementById("testport").innerText = "请输入端口"
                return
            }
            if(parseInt(ipt)<0 || parseInt(ipt)>65535){
                document.getElementById("testport").style.display = 'unset'
                document.getElementById("testport").innerText = "端口应不小于0且不大于65535"
                return
            }
            let re = await request("/portInUseState/" + ipt)
            if(re.status==false){
                document.getElementById("testport").style.display = 'unset'
                document.getElementById("testport").innerText = "此端口已占用"
                return
            }
            document.getElementById("testport").style.display = 'unset'
            document.getElementById("testport").innerText = "此端口可用"
            document.getElementById("p2next").style.display = 'unset'
            await request('/modifyPort/' + ipt)
        }
        async function addUser(){
            if(flag==false){
                return
            }
            flag = true
            document.getElementById("p3wt").style.display = 'none'
            let un = document.getElementById("usernameinput").value
            let up = document.getElementById("userpasswordinput").value
            let urp = document.getElementById("userpasswordreinput").value
            if(un==''){
                document.getElementById("p3wt").style.display = 'unset'
                document.getElementById("p3wt").innerText = '请输入用户名'
                return
            }
            if(checkString(un)==false || un.length<4 || un.length>32){
                document.getElementById("p3wt").style.display = 'unset'
                document.getElementById("p3wt").innerText = '用户名只能由大小写字母、数字或下划线组成，且长度不能短于4位、长于32位'
                return
            }
            if(up==''){
                document.getElementById("p3wt").style.display = 'unset'
                document.getElementById("p3wt").innerText = '请输入密码'
                return
            }
            if(checkString(up)==false || up.length<8 || up.length>16){
                document.getElementById("p3wt").style.display = 'unset'
                document.getElementById("p3wt").innerText = '密码只能由大小写字母、数字或下划线组成，且长度不能短于8位、长于16位'
                return
            }
            if(urp==''){
                document.getElementById("p3wt").style.display = 'unset'
                document.getElementById("p3wt").innerText = '请输入再次输入密码'
                return
            }
            if(up!=urp){
                document.getElementById("p3wt").style.display = 'unset'
                document.getElementById("p3wt").innerText = '两次输入的密码不一致'
                return
            }
            let re = await request('/addUser/' + JSON.stringify({
                name:un,
                password:up
            }))
            if(re.status==false){
                document.getElementById("p3wt").style.display = 'unset'
                document.getElementById("p3wt").innerText = re.content
                return
            }else{
                await changePage(4)
            }
            flag = false
        }
        function checkString(string){
            string = string.split('')
            for(let i=0;i<string.length;i++){
                if(string[i]=='-')continue
                string[i] = string[i].charCodeAt(0)
                if(string[i]>=48 && string[i]<=57){
                    continue
                }
                if(string[i]>=65 && string[i]<=90){
                    continue
                }
                if(string[i]>=97 && string[i]<=122){
                    continue
                }
                return false
            }
            return true
        }
        
    </script>
</head>
<body onload="loaded()" style="width: 100vw;height: 100vh;overflow-y: auto;overflow-x: hidden;">
    <div style="max-width: 1550px;margin: 0 auto;height: 100%;padding-top: 44px;width: 90%;">
        <p style="font-size: 32px;font-weight: bold;margin-bottom: 30px;">配置</p>
        <div id="pages" style="display: none;">
            <div class="page">
                <div style="line-height: 25px;text-indent: 2em;">
                    <p>欢迎使用 FileDB！</p>
                    <p>FileDB 是一个使用文件保存数据的数据库软件，它使用 Node.js 实现，具有类似 MySQL 的增删改查功能。它支持多个用户创建自己的数据库，并可以为每个用户设置访问密码。同时，多个用户共享同一个端口。</p>
                    <p>在使用FileDB之前，我们先进行一些配置。</p>
                </div>
                <div style="text-align: right;padding-top: 20px;">
                    <button onclick="changePage(2)">下一步</button>
                </div>
            </div>
            <div class="page">
                <p class="title2">设置端口</p>
                <p class="p">请输入访问FileDB的端口</p>
                <input id="portinput" placeholder="xxxx" style="border: 0;line-height: 30px;font-size: 16px;" type="number" />
                <br>
                <p class="p-red" id="testport" style="display: none;">此端口空闲</p>
                <br>
                <button onclick="testPort()">测试端口</button>
                <button onclick="changePage(3)" id="p2next" style="display: none;">下一步</button>
            </div>
            <div class="page">
                <p class="title2">新建用户</p>
                <p class="p">请输入用户名</p>
                <input id="usernameinput" placeholder="用户名" style="border: 0;line-height: 30px;font-size: 16px;" type="text" />
                <br>
                <p class="p">请输入密码</p>
                <input id="userpasswordinput" placeholder="密码" style="border: 0;line-height: 30px;font-size: 16px;" type="password" />
                <br>
                <p class="p">请再次输入密码</p>
                <input id="userpasswordreinput" placeholder="重复密码" style="border: 0;line-height: 30px;font-size: 16px;" type="password" />
                <br>
                <p class="p-red" id="p3wt" style="display: none;"></p>
                <br>
                <button onclick="addUser()">下一步</button>
            </div>
            <div class="page">
                <p class="title2">配置成功</p>
                <p class="p">你已经成功设置数据库端口和一个用户，你现在用过Start.cmd运行数据库了，如果您需要使用数据库的管理界面，请点击左侧的退出按钮然后重新运行Configure.cmd或刷新此页面。</p>
            </div>
        </div>
    </div>
</body>
</html>